<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="../../src/xterm.css" />
    <link rel="stylesheet" href="../../demo/style.css" />
    <script src="../../src/xterm.js"></script>
    <script src="attach.js"></script>
    <style>
        body {
            color: #111;
        }
        
        h1, h2 {
            color: #444;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
        
        form {
            margin-bottom: 32px;
        }
        
        input, button {
            line-height: 22px;
            font-size: 16px;
            display: inline-block;
            border-radius: 2px;
            border: 1px solid #ccc;
        }
        
        input {
            height: 22px;
            padding-left: 4px;
            padding-right: 4px;
        }
        
        button {
            height: 28px;
            background-color: #ccc;
            cursor: pointer;
            color: #333;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
  </head>
  <body>
      <div class="container">
          
    <h1>
        xterm.js: socket attach
    </h1>
          <p>
              Attach the terminal to a WebSocket terminal stream with ease. Perfect for attaching to your
              Docker containers.
          </p>
          <h2>
              Socket information
          </h2>
    <form id="socket-form">
      <input id="socket-url"
             type="text"
             placeholder="Enter socket url (e.g. ws://mysock)"
             autofocus />
      <button>
        Attach
      </button>
    </form>
    <div id="terminal-container"></div>
          
      </div>
    <script>
      var term = new Terminal(),
          container = document.getElementById('terminal-container'),
          socketUrl = document.getElementById('socket-url'),
          socketForm = document.getElementById('socket-form');
      
      socketForm.addEventListener('submit', function (ev) {
        ev.preventDefault();
        var url = socketUrl.value,
            sock = new WebSocket(url);
        sock.addEventListener('open', function () {
          term.attach(sock);
        });
      });
      
      term.open(container);
    </script>
  </body>
</html>